A Line chart/Gauge dashboard

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.drawing.yaxis.js"></script>
<script src="RGraph.gauge.js"></script>
<script src="RGraph.line.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="975" height="250" style="border: 1px solid #ddd; box-shadow: 1px 1px 2px #ccc">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
        var grad;

        var line = new RGraph.Line({
            id: 'cvs',
            data: [
                [125,128,135,136,21,137,125,123,126,124,123,125,128,128,124,125,126,123,122,121,126,124,125,126,122,121,120,119,11,17],
                [125,126,179,165,132,35,36,37,48,49,12,35,48,45,46,43,38,51,52,12,16,95,96,91,48,43,29,24,53,101]
            ],
            options: {
                colors: ['#0091FE','#90AA00'],
                backgroundColor: '#eee',
                backgroundGridColor: 'white',
                backgroundGridVlines: false,
                noaxes: true,
                ymax: 180,
                scaleDecimals: 2,
                scaleZerostart: true,
                textSize: 8,
                textColor: '#0091FE',
                gutterLeft: 40,
                gutterRight:300,
                ylabelsCount: 6,
                tickmarks: 'dot',
                ticksize: 5,
                tickmarksDotLinewidth: 1,
                shadow: false,
                textAccessible: true
            }
        }).trace2({frames: 60});
        
        grad = line.context.createLinearGradient(825 - 65,0,825 + 65,0);
        grad.addColorStop(0, 'green');
        grad.addColorStop(0.4, 'yellow');
        grad.addColorStop(0.6, 'yellow');
        grad.addColorStop(1, 'red');



        var gauge = new RGraph.Gauge({
            id: 'cvs',
            value: 57,
            min: 0,
            max: 100,
            options: {
                centerx: 825,
                centery: 63,
                radius: 75,
                anglesStart: 3.14 - 0.785,
                anglesEnd: 6.28 + 0.785,
                greenEnd: 100,
                redStart: 100,
                yellowColor: 'transparent',
                redColor: 'transparent',
                greenColor: grad,
                textColor: 'gray',
                labelsCount: 0,
                valueText: true,
                valueTextBounding: false,
                valueTextColor: '#aaa',
                unitsPost: '%',
                tickmarksBigColor: 'transparent',
                tickmarksSmallColor: 'transparent',
                shadow: false,
                needleColors: ['blue'],
                backgroundColor: 'rgba(0,0,0,0)',
                borderOuter: 'rgba(0,0,0,0)',
                borderInner: 'rgba(0,0,0,0)',
                borderOutline: 'rgba(0,0,0,0)',
                textAccessible: true
            }
        }).on('beforedraw', function (obj)
        {
            // On the first frame obj.centerx is not defined, but
            // it is on subsequent frames
            RGraph.path2(obj.context,[
                'b',
                'a',obj.centerx,obj.centery, 60,0,6.28, false,
                'f', 'rgba(232,232,232,.5)'
            ]);
        }).draw();



        var gauge = new RGraph.Gauge({
            id: 'cvs',
            value: 34,
            min: 0,
            max: 100,
            options: {
                centerx: 825,
                centery: 187,
                radius: 75,
                anglesStart: 3.14 - 0.785,
                anglesEnd: 6.28 + 0.785,
                greenEnd: 100,
                redStart: 100,
                yellowColor: 'transparent',
                redColor: 'transparent',
                greenColor: grad,
                textColor: 'transparent',
                tickmarksBigColor: 'transparent',
                tickmarksSmallColor: 'transparent',
                shadow: false,
                needleColors: ['blue'],
                backgroundColor: 'rgba(0,0,0,0)',
                borderOuter: 'rgba(0,0,0,0)',
                borderInner: 'rgba(0,0,0,0)',
                borderOutline: 'rgba(0,0,0,0)',
                valueText: true,
                valueTextColor: '#aaa',
                valueTextBounding: false,
                unitsPost: 'km/h',
                textAccessible: true
            }
        }).on('beforedraw', function (obj)
        {
            // On the first frame obj.centerx is not defined, but
            // it is on subsequent frames
            RGraph.path2(obj.context,[
                'b',
                'a',obj.centerx,obj.centery, 60,0,6.28, false,
                'f', 'rgba(232,232,232,.5)'
            ]);
        }).draw();



        // Draw the right hand Y axis using the drawing API
        var yaxis = new RGraph.Drawing.YAxis({
            id: 'cvs',
            x: line.canvas.width - line.gutterRight,
            options: {
                align: 'right',
                max: 8,
                scaleDecimals: 1,
                textSize: 8,
                textColor: '#90AA00',
                colors: ['transparent'],
                textAccessible: true
            }
        }).draw();
    };
</script>